<template>
    <div class="content">
        <div class="left-bottom">
            <div class="title">
                消控室
            </div>
            <div class="container" v-if="fcrDutyUserRelatedVO.length!=0">
                <div v-for="(item,index) in fcrDutyUserRelatedVO" :key="index" >
                    <span>值班人员{{index+1}}：</span><span>{{item.mobile}}</span>{{item.userName}}
                </div>
            </div>
            <div class="container" v-else>
                <div >
                    <span>值班人员1：</span>-
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reqGetDetails } from "@/api/api";

export default {
    props: ['fcrDutyUserRelatedVO'],
    components: {
    },
    data() {
        return {
        };
    },
    computed: {
    },
    watch: {},
    methods: {
    //    async getGetDetails(parentDeviceCode){
    //         let res = await reqGetDetails(parentDeviceCode);
    //         if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //         console.log(res,'res');
    //         this.fcrDutyUserRelatedVO=res.data.info.fcrDutyUserRelatedVO||[]
    //     },
    },
    created() {
    },
    mounted() { },
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .title {
        .height(43);
        width: 100%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../../assets/images/datavPop/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600;

        i {
            .fontSize(20);
            color: #fff;
        }
    }

    .left-bottom {
        height: 100%;
        // background: rgba(13, 24, 86, 1);
        box-shadow: inset -9px 3px 20px 0px #032b60, inset 9px -3px 20px 0px #032e68;
    }
}

.container {
    height: 62%;
    overflow-y: auto;
    padding-left: 15px;
    box-sizing: border-box;
    font-size: 0.8vw;

    >div {
        margin-top: 1.3vh;
        >span:first-of-type {
            color: #8299c9;
        }
        >span:nth-of-type(2) {
            margin-right: 8px;
        }
    }
}
.gengduo1{
  margin-left: 2px;
  font-size: 18px;
  cursor: pointer;
  color: #09E8FC;
}
</style>